<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>分析Hello</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				总结：
						1.Vue实例和容器是一一对应的。
						2.真实开发中只有一个Vue实例，并且会配合着组件一起使用。
						3.{{xxx}} 中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
						4.一旦data中的数据发生改变，那么页面中用到该数据的地方，会自动更新。

						注意区分：js表达式 和 js语句（js代码）
								1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。
										(1). 100
										(2). a
										(3). demo(1)
										(4). x === y ? 1 : 0

								2.js语句（js代码）:一段可以运行的代码
										(1).if(){}
										(2).for(){}
										等等
		-->

		<!-- 准备好一个容器，用于承接Vue的工作成果 -->
		<div id="demo">
			<h1>Hello，{{name}}，{{address}}</h1>
			<h1>Hello，{{1+1}}</h1>
			<h1>Hello，{{name+'！！！！'}}</h1>
			<h1>Hello，{{name.toUpperCase()}}</h1>
			<h1>Hello，{{name === 'atguigu' ? 100 : 200}}</h1>
			<h1>Hello，{{666/2}}</h1>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
			
			//创建Vue实例对象
		 	new Vue({
				el:'#demo', 
				data:{ 
					name:'atguigu',
					address:'宏福科技园'
				}
			})

		</script>
	</body>
</html>